/*
 * @Description: 查看申请弹窗
 * @Author: Rfan
 * @Date: 2022-03-29 13:57:08
 * @LastEditTime: 2023-02-28 10:51:33
 */

import { useEffect, useState } from 'react';
import { Button, Descriptions, Form, Input, Modal, Table } from 'antd';
import classNames from 'classnames/bind';
import dayjs from 'dayjs';
import { useRightApproveContext } from '../../../contexts/RightApproveContext';

import styles from './styles/index.module.scss';
import { EnumApproveDialogTypes } from '../../../dictionaries';

const cx = classNames.bind(styles);
const { Column } = Table;

const ApproveDialog = (props: any) => {
  const { visible, data, onClose, datas } = props;
  const { submitApprove } = useRightApproveContext();
  const [isApprove, setIsApprove] = useState(false);
  const applyForm = data?.applyForm || {};
  const archiveItemList = data?.archiveItemList || [];
  const [form] = Form.useForm();
  const [submitState, setSubmitState] = useState(false);

  useEffect(() => {
    if (visible) {
      setIsApprove(datas.type === EnumApproveDialogTypes.Approve);
    }
  }, [datas]);
  // 提交表单
  const submitFunc = (state: boolean) => {
    console.log('submit');
    setSubmitState(state);
    form.submit();
  };

  /**
   * @description: 审批通过
   */
  const submitAgree = () => {
    submitFunc(true);
  };

  /**
   * @description: 审批拒绝
   */
  const submitDisagree = () => {
    submitFunc(false);
  };
  // TODO 我要看接口
  const handleFinished = (values: any) => {
    const params = {
      id: datas.taskId,
      processInstanceId: datas.processInstanceId,
      userId: datas.assignee,
      ...values
    };
    const param = { result: submitState };
    console.log('handleFinished', params);
    submitApprove({ ...params, param });
  };

  const onCancel = () => {
    onClose();
  };

  return (
    <Modal
      title="利用审批"
      visible={visible}
      width={800}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
        isApprove && (
          <Button key="back" onClick={submitDisagree}>
            退回
          </Button>
        ),
        isApprove && <Button key="assistance">协助</Button>,
        isApprove && <Button key="change">改派</Button>,
        isApprove && <Button key="block">作废</Button>,
        isApprove && (
          <Button key="submit" type="primary" onClick={submitAgree}>
            同意
          </Button>
        )
      ]}
    >
      <div className={cx('info')}>
        <Descriptions title="利用申请信息" size="middle">
          <Descriptions.Item label="申请日期">
            {dayjs(applyForm.applyTime).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item label="申请人" span={2}>
            {applyForm.proposer}
          </Descriptions.Item>
          <Descriptions.Item label="申请类型">{applyForm.useTypeEntity}</Descriptions.Item>
          <Descriptions.Item label="利用目的">{applyForm.purpose}</Descriptions.Item>
          <Descriptions.Item label="利用天数">{applyForm.useDay}</Descriptions.Item>
          <Descriptions.Item label="利用说明">{applyForm.description}</Descriptions.Item>
        </Descriptions>
      </div>
      <div className={cx('list')}>
        <h6>审批利用列表</h6>
        <Table dataSource={archiveItemList} rowKey="id" size="small" bordered>
          <Column title="序号" dataIndex="id" key="id" align="center" />
          <Column title="档号" dataIndex="archiveNo" key="archiveNo" align="center" />
          <Column
            title="档号题名"
            dataIndex="title"
            key="title"
            align="center"
            render={(text) => <span dangerouslySetInnerHTML={{ __html: text }} />}
          />
          <Column
            title="档案类型"
            dataIndex="archiveTypeName"
            key="archiveTypeName"
            align="center"
          />
          <Column title="所属部门" dataIndex="departmentName" key="departmentName" align="center" />
          {/* <Column
            title={formatMessage('tableAction')}
            key="action"
            align="center"
            render={(_text, _record: any) => (
              <Select>
                <Option value={1}>同意</Option>
                <Option value={0}>不同意</Option>
              </Select>
            )}
          /> */}
        </Table>
      </div>

      <div className={cx('result')}>
        <Form form={form} colon={false} onFinish={handleFinished}>
          <Form.Item name="comment" label="审批意见">
            <Input.TextArea rows={3} />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

export default ApproveDialog;
